<!DOCTYPE html>
<html class="gt-ie8 gt-ie9 not-ie">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>后台管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- Pixel Admin's stylesheets -->
    <link href="assets/css/bootstrap/datetimepicker.css" rel="stylesheet" type="text/css">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/bootstrap-duallistbox.css" rel="stylesheet" />
    <link href="assets/css/pixel-admin.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/widgets.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/rtl.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/themes.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/grid/openplat.css" rel="stylesheet">
    <link href="assets/css/sco.css" rel="stylesheet">
    <link href="assets/css/jquery/jquery.webui-popover.min.css" rel="stylesheet">
    <link href="assets/css/morris/morris.css" rel="stylesheet">
    <link href="assets/js/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" />
  <style>
  .sgrid table tr {
    height: 36px
  }
  
  .z-loading-wrap {
    overflow: hidden;
    position: absolute;
    top: 45%;
    left: 50%;
    z-index: 1000;
    width: 100px;
    height: 100px;
    display: none;
    margin-left: -50px;
  }
  
  .z-loading-wrap img {
    width: 60px;
    height: 60px;
  }

  .f12{ font-size:12px !important; }
  .f14{ font-size:14px !important; }
  .f15{ font-size:14px !important; font-family:"Microsoft YaHei" }
  .f16{ font-size:16px !important; font-family:"Microsoft YaHei" }
  .f18{ font-size:18px !important; font-family:"Microsoft YaHei" }
  .f22{ font-size:22px !important; font-family:"Microsoft YaHei" }
  .f24{ font-size:24px !important; font-family:"Microsoft YaHei" }
  .f28{ font-size:28px !important; font-family:"Microsoft YaHei" }
  .f30{ font-size:30px !important; font-family:"Microsoft YaHei" }
  .fl{ float: left; }
  .fr{ float: right; }
  .cf:after { content: ""; display: block; visibility: hidden; height: 0; clear: both; }
  .cf{ zoom: 1; }
  .p0 {  padding:0px !important;}
  .p2 {  padding:2px !important;}
  .p5 {  padding:5px !important;}
  .p10 {  padding:10px !important;}
  .p15 {  padding:15px !important;}
  .p20 {  padding:20px !important;}
  .p25 {  padding:25px !important;}
  .p30 {  padding:30px !important;}

  .pt0 {  padding-top:0px !important;}
  .pt2 {  padding-top:2px !important;}
  .pt5 {  padding-top:5px !important;}
  .pt10 { padding-top:10px !important;}
  .pt15 { padding-top:15px !important;}
  .pt20 { padding-top:20px !important;}
  .pt25 { padding-top:25px !important;}
  .pt30 { padding-top:30px !important;}

  .pb0 {  padding-bottom:0px !important;}
  .pb2 {  padding-bottom:2px !important;}
  .pb5 {  padding-bottom:5px !important;}
  .pb10 { padding-bottom:10px !important;}
  .pb15 { padding-bottom:15px !important;}
  .pb20 { padding-bottom:20px !important;}
  .pb25 { padding-bottom:25px !important;}
  .pb30 { padding-bottom:30px !important;}

  .pl0 {  padding-left:0px !important;}
  .pl2 {  padding-left:2px !important;}
  .pl5 {  padding-left:5px !important;}
  .pl10 { padding-left:10px !important;}
  .pl15 { padding-left:15px !important;}
  .pl20 { padding-left:20px !important;}
  .pl25 { padding-left:25px !important;}
  .pl30 { padding-left:30px !important;}

  .pr0 {  padding-right:0px !important;}
  .pr2 {  padding-right:2px !important;}
  .pr5 {  padding-right:5px !important;}
  .pr10 { padding-right:10px !important;}
  .pr15 { padding-right:15px !important;}
  .pr20 { padding-right:20px !important;}
  .pr25 { padding-right:25px !important;}
  .pr30 { padding-right:30px !important;}

  .ma{ margin:auto;}
  .m0 { margin:0px !important;}
  .m3 { margin:3px !important;}
  .m5 { margin:5px !important;}
  .m10 {  margin:10px !important;}
  .m15 {  margin:15px !important;}
  .m20 {  margin:20px !important;}
  .m25 {  margin:25px !important;}
  .m30 {  margin:30px !important;}

  .mt0 {  margin-top:0px !important;}
  .mt3 {  margin-top:3px !important;}
  .mt5 {  margin-top:5px !important;}
  .mt10 { margin-top:10px !important;}
  .mt15 { margin-top:15px !important;}
  .mt20 { margin-top:20px !important;}
  .mt25 { margin-top:25px !important;}
  .mt30 { margin-top:30px !important;}

  .mb0 {  margin-bottom:0px !important;}
  .mb3 {  margin-bottom:3px !important;}
  .mb5 {  margin-bottom:5px !important;}
  .mb10 { margin-bottom:10px !important;}
  .mb15 { margin-bottom:15px !important;}
  .mb20 { margin-bottom:20px !important;}
  .mb25 { margin-bottom:25px !important;}
  .mb30 { margin-bottom:30px !important;}

  .ml0 {  margin-left:0px !important;}
  .ml3 {  margin-left:3px !important;}
  .ml5 {  margin-left:5px !important;}
  .ml10 { margin-left:10px !important;}
  .ml15 { margin-left:15px !important;}
  .ml20 { margin-left:20px !important;}
  .ml25 { margin-left:25px !important;}
  .ml30 { margin-left:30px !important;}

  .mr0 {  margin-right:0px !important;}
  .mr3 {  margin-right:3px !important;}
  .mr5 {  margin-right:5px !important;}
  .mr10 { margin-right:10px !important;}
  .mr15 { margin-right:15px !important;}
  .mr20 { margin-right:20px !important;}
  .mr25 { margin-right:25px !important;}
  .mr30 { margin-right:30px !important;}
  .tc{ text-align: center; }
  .tr{ text-align: right; }
  .ico-txt{ font-size: 18px; font-weight: bold; vertical-align: middle; height: 18px; line-height: 18px; display: inline-block; margin: 0 3px 0 0; }
  .vam{ vertical-align: middle; } 
  .my-content{}
  .my-item{ padding:5px; } 
  .my-item-in{ padding:5px; font-size: 14px; font-weight: bold; }
  .my-item:hover{ background:#f1f9fe; } 

  .arrow{ left:50% !important; }

  .my-table{ table-layout: fixed;  }
  .my-table td,.my-table th{ border: 1px solid #ddd; }
  .my-table .t-title{ padding: 10px; background:#f3f3f3;  max-width: 151px; font-weight: bold; }
  .my-table tbody tr:hover{ background: #f1f9fe; }
  .my-table .t-td{  }
  .my-table .t-td label{ width:100%; height:100%; text-align:center; display:table; }
  .my-table .t-td label i{ display: table-cell; vertical-align: middle; }
  .my-table .nosee:after{ content: "#";  visibility:hidden; display: block;  }
  .my-table .nosee{  }

  </style> 
  <script type="text/javascript"> window.jQuery || document.write("<script src='assets/js/jquery-1.12.4.min.js'>"+"<"+"/script>"); </script>
  <link href="assets/js/colorpicker/jquery.bigcolorpicker.css" rel="stylesheet">
  <script src="assets/js/colorpicker/jquery.bigcolorpicker.js"></script>
  <script src="assets/js/bootstrap/bootstrap-datetimepicker.min.js"></script>
  <script src="assets/js/bootstrap/jquery.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
  <script src="assets/js/jquery.bootstrap-duallistbox.js"></script>
  <script src="assets/js/jquery/jquery.webui-popover.js"></script>
  <script src="assets/js/grid/spagination.js"></script>
  <script src="assets/js/grid/sgrid.js"></script>
  <script src="assets/js/grid/model.js"></script>
  <script src="assets/js/grid/utils.js"></script>
  <script src="assets/js/util/JsUtil.js"></script>
  <script src="assets/js/util/form.js"></script> 
  <script src="assets/js/pixel-admin.min.js"></script>
  <script src="assets/js/quote.js"></script>
  <script src="assets/js/morris/raphael-min.js"></script>
  <script src="assets/js/morris/morris.min.js"></script>
  <script src="assets/js/util/ajaxupload.3.6.js"></script>
  <script src="assets/js/util/imgbox.js"></script>
  <script src="assets/js/util/md5.js"></script>
  <script src="assets/js/bootstrap-fileinput/js/fileinput.min.js"></script>
  <script src="assets/js/bootstrap-fileinput/js/fileinput_locale_zh.js"></script>
  <script src="assets/js/ueditor/ueditor.config.js" type="text/javascript"></script>
  <script src="assets/js/ueditor/ueditor.all.min.js" type="text/javascript"> </script>
  <script src="assets/js/ueditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
  <script src="assets/js/Sco.js"></script> 

  <link href="assets/js/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
  <script src="assets/js/bootstrap-select/js/bootstrap-select.min.js"></script>  

</head>
<body class="theme-default main-menu-animated">

<div style="margin: 30px;">
  <ul class="nav nav-tabs" id="tabBtn">
    <li class="active"><a href="javascript:;">基本信息</a></li>
    <li><a href="javascript:;">比赛分类设置</a></li> 
    <li><a href="javascript:;">兼项控制</a></li> 
  </ul>
  <dl id="tabContent" style=" background: #fff; padding: 20px; ">
    <dd style="overflow: hidden; height: auto;">
      <input id="basePathId" name="basePath" type="hidden"  value="<%=basePath%>">
      <form id="submitForm" class="form-horizontal"  > 
        <div class="form-group">
          <label class="col-sm-1 control-label" for="matchName"><font
            color="red">*</font>比赛名称：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="matchName"
              name="name" placeholder="请填写比赛名称" />
          </div>
          <label class="col-sm-1 control-label" for="matchzbf"><font
            color="red">*</font>主办单位：</label>
          <div class="col-md-5">
            <select class="form-control" name="matchzbf" id="matchzbf">
              <option value="">==协会单位==</option>
              <c:forEach items="${classifyList}" var="classify">
                <option value="${classify.id}">${classify.name}</option>
              </c:forEach>
            </select>
          </div>
         </div>
         <div class="form-group">
          <label class="col-sm-1 control-label" for="matchxz"><font
            color="red">*</font>比赛性质：</label>
          <div class="col-md-5">
            <select class="form-control" name="matchxz" id="matchxz">
              <option value="">==请选择==</option>
              <option value="1">社会组</option>
              <option value="2">单位组</option>
              <option value="3">其他组</option>
            </select>
          </div>
          <label class="col-sm-1 control-label" for="register"><font
            color="red">*</font>正式会员：</label>
           <div class="col-md-5">
             <select class="form-control" name="register" id="register">
               <option value="">==请选择==</option>
               <option value="1" >是</option>
               <option value="2">否</option>
             </select>
           </div>
        </div>
        <div class="form-group">
          <label class="col-sm-1 control-label" for="matchKind"><font
              color="red">*</font>比赛分类：</label>
          <div class="col-md-5">
            <select class="form-control" name="matchKind" id="matchKind">
              <option value="">==请选择==</option>
              <option value="1">团体赛</option>
              <option value="2">单项赛</option>
            </select>
          </div>
          <label class="col-sm-1 control-label" for="matchLevel"><font
              color="red">*</font>比赛级别：</label>
          <div class="col-md-5">
            <select class="form-control" name="matchLevel" id="matchLevel">
              <option value="">==请选择==</option>
              <option value="1">一星赛事</option>
              <option value="2">二星赛事</option>
              <option value="3">三星赛事</option>
              <option value="4">四星赛事</option>
              <option value="5">五星赛事</option>
              <option value="6">六星赛事</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-1 control-label " for="matchContent" >比赛简介：</label>
          <div class="col-md-11">
            <textarea class="form-control" rows="3"  id="matchContent" name="matchContent"  placeholder="比赛简介" ></textarea>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-1 control-label " for="numbers" >比赛人数：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="numbers" name="numbers"
                 placeholder="比赛人数" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-1 control-label " for="starttime" ><font
            color="red">*</font>开始时间：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="starttime" name="starttime"
              placeholder="开始时间" />
          </div>
          <label class="col-sm-1 control-label " for="endtime" >结束时间：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="endtime" name="endtime"
              placeholder="结束时间" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-1 control-label " for="overtime" >截止日期：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="overtime" name="overtime"
              placeholder="截止日期" />
            <div id="validation-username" class="validate-error help-block"></div>
          </div>
          <label class="col-sm-1 control-label" for="status"><font color="red">*</font>状态：</label>
          <div class="col-md-5">
            <select class="form-control" name="status" id="status">
              <option value="0" selected="selected">完赛</option>
              <option value="1">未赛</option>
            </select>
          </div>
         </div>
         <div class="form-group">
          <label class="col-sm-1 control-label " for="matchAddress" >比赛地址：</label>
          <div class="col-md-11">
            <input class="form-control" type="text" id="matchAddress" name="matchAddress" placeholder="比赛地址" />
          </div>
          </div>
          <div class="form-group">
          <label class="col-sm-1 control-label " for="matchCpz" >裁判长：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="matchCpz" name="matchCpz" placeholder="裁判长" />
          </div>
          </div>
          <div class="form-group">
          <label class="col-sm-1 control-label " for="money" >参赛费：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="money" name="money" placeholder="参赛费" />
          </div>
          <label class="col-sm-1 control-label " for="moneys" >重复报名费：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="moneys" name="moneys" placeholder="重复报名费" />
          </div>
         </div>
         <div class="form-group">
          <label class="col-sm-1 control-label" for="pic_1">形象图片：</label>
          <div class="col-md-11">
             <input id="pic_1" name="pic_1" type="file" data-show-caption="true">  
             <p class="help-block">支持jpg、jpeg、png格式，大小不超过1.0M</p> 
             <input type="hidden" id="pic_1_hidden" name="pic_1_hidden" /> 
          </div>
        </div>
      </form>
      <div style="margin: 20px 0; border-top: 1px solid #ddd; text-align: right; padding-top: 15px;"><button onclick="submit()" class="btn btn-primary btn-lg"><b class="pl20 pr20">提交</b></button> </div>
    </dd>

    <dd style="overflow: hidden; height: 0;"> 
      <div class="form-horizontal" style="min-height: 500px;"> 
        <div class="form-group">
          <label class="fl control-label ml20"><font color="red">*</font> 比赛分类：</label>
          <div class="fl">
            <span id="matchTypeTxt" class="f14 mr10 ml10">单项赛</span>
            <button class="btn btn-default" data-toggle="modal" data-target="#matchTypePopup">修改类型</button>
          </div>
        </div> 
        <div id="singleMatch" class="my-container" style="border-top: 1px solid #ddd; padding-top: 10px; margin-bottom:20px;">
          <div class="my-content" id="singleMatchIn"  style="min-height: 60px;"></div>
          <div class="mt10 cf pl10 pr5"><span class="fl my-item-in">亲子组</span><button onclick="addParentchild('single')" class="btn btn-default fr">+ 亲子组</button></div>
          <div id="singleParentChild"></div>
        </div>

        <div id="groupMatch" class="my-container" style="display:none; border-top: 1px solid #ddd; padding-top: 10px;">
          <div class="my-content"id="groupMatchIn"  style="min-height: 60px;"></div>
          <div class="mt10 cf pl10 pr5"><span class="fl my-item-in pl10">亲子组</span><button onclick="addParentchild('group')" class="btn btn-default fr">+ 亲子组</button></div>
          <div id="groupParentChild"></div>
        </div> 
      </div>
      <!-- <div style="margin: 20px 0; border-top: 1px solid #ddd; text-align: right; padding-top: 15px;"><button onclick="submit2()" class="btn btn-primary btn-lg"><b class="pl20 pr20">提交</b></button> </div> -->
    </dd>

    <dd style="overflow: hidden; height: 0;">
      <div class="cf mb10">
        <label class="fl control-label" for="isJx">兼项：</label>
        <div class="fl">
          <label><input type="radio" name="concurrent" value="0" class="mr5" checked="checked" onclick="$('#isConcurrent,#maxNum').hide();" style="vertical-align: middle;" /><span style="vertical-align: middle;">否</span></label>
          <label class="ml20" ><input type="radio" name="concurrent" value="1" class="mr5"     onclick="$('#isConcurrent,#maxNum').show(); setConcurrent();" style="vertical-align: middle;" /><span style="vertical-align: middle;">是</span></label>
        </div>
        <div class="fl" id="maxNum" style="margin-left:80px; display:none;">
          最大报名数：<input type="text" onchange="" style="width: 50px; text-align:center;" ><span style="color: #999; margin-left: 10px;">(一名运动员最大的可以报名数量)</span>
        </div>
      </div>
      <div id="isConcurrent" style="display: none;">
        <div id="concurrentBox" style="border: 1px solid #ddd; height: 580px; margin: 0 auto; position: relative; ">
          <div id="tabTopCon" style="width: 100%; overflow: hidden; margin-top: -1px; position: relative; z-index: 1;"><div id="tabTop" style="width: 9999999px;"></div></div>
          <div id="tabDataCon" style="width:100%; overflow: auto; margin-top: -1px;"><div id="tabData" ></div></div>
          <div id="tabLeftTop" style="position:absolute; left: -1px; top: -1px; z-index: 3; border: 1px solid #ddd; background:#f3f3f3; "></div>
          <div id="tabLeftCon" style="position:absolute; overflow:hidden;  left: -1px; top: 0; z-index: 2; "><div id="tabLeft" style="height: 9999999px;"></div></div>
        </div>
        <div style="margin: 20px 0; border-top: 1px solid #ddd; text-align: right; padding-top: 15px;"><button onclick="submit3()" class="btn btn-primary btn-lg"><b class="pl20 pr20">提交</b></button> </div>
      </div>
    </dd>

  </dl>
</div>

<!-- 修改比赛分类 -->
<div class="modal fade" id="matchTypePopup" role="dialog" aria-hidden="true">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">修改比赛类型</h4>
            </div>
            <div class="modal-body">              
              <label class="radio-inline"><input type="radio" value="singleMatch" checked="checked" name="matchType" text="单项赛">单项赛</label>
              <label class="radio-inline ml30"><input type="radio" value="groupMatch" name="matchType" text="团体赛">团体赛</label>
              <label class="radio-inline ml30"><input type="radio" value="mixMatch" name="matchType" text="混合赛">混合赛</label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="setMatchType()">提交更改</button>
            </div>
        </div>
    </div>
</div> 

<!-- 添加比赛分组子分类 -->
<div class="modal fade" id="matchChildPopup" role="dialog" aria-hidden="true">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">新增比赛分组</h4>
            </div>
            <div class="modal-body">
              <div class="cf mb15">
                <label class="fl tr" style="width:150px; line-height: 30px; padding-right: 7px;">分组名称：</label>
                <input type="text" id="newName" style=" height: 30px; line-height: 30px; padding:0 5px;">
              </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="doAddItem()">提交更改</button>
            </div>
        </div>
    </div>
</div> 

<!-- 添加比赛分组属性 -->
<div class="modal fade" id="matchItemPopup" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="width:500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">设置比赛分组</h4>
            </div>
            <div class="modal-body">  
              <div class="cf mb15">
                <label class="fl tr" style="width:100px; line-height: 30px; padding-right: 7px;">分组名称：</label>
                <input type="text" id="modifyName" style=" height: 30px; line-height: 30px; padding:0 5px;">
              </div>
              <div class="cf mb15">
                <label class="fl tr" style="width:100px; line-height: 30px; padding-right: 7px;">年龄限制：</label>
                <select class="age-select" style="width: 100px; height:30px; line-height:30px; vertical-align:middle;" onchange="selCustom(this)" id="ageSel"></select>
                <span style="display: none; vertical-align: middle;"><input type="text" class="tc age-min" id="ageMinInp" style="width:50px; height: 30px; line-height: 30px;"> - <input type="text" class="tc age-max" id="ageMaxInp" style="width:50px; height: 30px; line-height: 30px;"></span>
              </div>
              <div class="cf mb15">
                <label class="fl tr" style="width:100px; line-height: 30px; padding-right: 7px;">年龄总和限制：</label>
                <select class="total-age-select" style="width: 100px; height:30px; line-height:30px; vertical-align:middle;" onchange="selCustom(this)" id="ageTotleSel"></select>
                <span style="display: none; vertical-align: middle;"><input type="text" class="tc age-total" id="ageTotleInp" style="width:50px; height: 30px; line-height: 30px;"></span>
              </div>
              <div class="cf mb15">
                <label class="fl tr" style="width:100px; line-height: 30px; padding-right: 7px;">跨年龄组：</label>
                 <select class="age-group-selcect" style="width: 100px; height:30px; line-height:30px; vertical-align:middle;" id="ageGroupSel" title="请选择跨年龄组限制"></select> 
              </div>
              <div class="cf">
                <label class="fl tr" style="width:100px; line-height: 30px; padding-right: 7px; margin-right: -107px;">项目设置：</label>
                <div class="fl" style="margin-left:100px;" id="projectContent">
                </div>
              </div> 

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="doItemDetial()">提交更改</button>
            </div>
        </div>
    </div>
</div> 

<!-- 删除确定框 -->
<div class="modal fade" id="closeDailog" role="dialog" aria-hidden="true">
 <div class="modal-dialog" style="width:500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">确认删除</h4>
            </div>
            <div class="modal-body">   
              是否删除该分组以及该分组下面的所有子分组信息？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="delMatchItem()">提交更改</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加亲子组 -->
<div class="modal fade" id="parentChild" role="dialog" aria-hidden="true">
 <div class="modal-dialog" style="width:500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="parentChildTitle">添加亲子组</h4>
            </div>
            <div class="modal-body">   
              
              <div class="cf mb15">
                <label class="fl tr" style="width:100px; line-height: 30px; padding-right: 7px;">亲子组名称：</label>
                <input type="text" name="" id="parentChildName" style=" height: 30px; line-height: 30px; padding:0 5px;">
              </div>
              <div class="cf mb15">
                <label class="fl tr" style="width:100px; line-height: 30px; padding-right: 7px;">项目类型：</label>
                <select class="parent-child-selcect" style="width: 100px; height:30px; line-height:30px; vertical-align:middle;" id="parentChildProjectSel" title="请选择亲子组类型"></select> 
              </div>
              <div class="cf mb15">
                <label class="fl tr" style="width:100px; line-height: 30px; padding-right: 7px;">家长年龄：</label>
                <select class="age-select" style="width: 100px; height:30px; line-height:30px; vertical-align:middle;" id="ageParentSel"  onchange="selCustom(this)"></select>
                <span style="display: none; vertical-align: middle;"><input type="text" class="tc age-min" id="ageMinParentInp" style="width:50px; height: 30px; line-height: 30px;"> - <input type="text" class="tc age-max" id="ageMaxParentInp" style="width:50px; height: 30px; line-height: 30px;"></span>
              </div>
              <div class="cf mb15">
                <label class="fl tr" style="width:100px; line-height: 30px; padding-right: 7px;">孩子年龄：</label>
                <select class="age-select" style="width: 100px; height:30px; line-height:30px; vertical-align:middle;" id="ageChildSel"  onchange="selCustom(this)"></select>
                <span style="display: none; vertical-align: middle;"><input type="text" class="tc age-min" id="ageMinChildInp" style="width:50px; height: 30px; line-height: 30px;"> - <input type="text" class="tc age-max" id="ageMaxChildInp" style="width:50px; height: 30px; line-height: 30px;"></span>
              </div> 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="doParentchild()">提交更改</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="closeParentChlid" role="dialog" aria-hidden="true">
 <div class="modal-dialog" style="width:500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">确认删除</h4>
            </div>
            <div class="modal-body">   
              是否删除该亲子组？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="delParentChild()">提交更改</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
  var currItemID,matchData;
  var projectObj = {
      "MANDOUBLE":"男双",
      "MANSINGLE":"男单",
      "MIXDOUBLE":"混双",
      "WOMENDOUBLE":"女双",
      "WOMENSINGLE":"女单",
      "UNLIMITDOUBLE":"无差别双打",
      "MANTHREE":"男子3V3",
      "WOMENTHREE":"女子3V3",
      "MIXTHREE":"混合3V3"
      },
      groupObj={
        "0":"不允许",
        "1":"升组",
        "2":"降组",
        "3":"不限",
      },
      parentChildObj={
        "unlimit":"不限",
        "male-male":"父子双打",
        "female-male":"母子双打",
        "male-female":"父女双打",
        "female-female":"母女双打",
      }
  $(function(){
    $("#tabBtn li").on("click",function(){
      var n = $(this).index();
      $("#tabContent > dd").eq(n).css({ height:'auto' });
      $("#tabContent > dd").eq(n).siblings("dd").css({ height:'0' });
      $(this).addClass("active");
      $(this).siblings("li").removeClass("active");
    });

    $(".age-select").html(getAgeOption());
    $(".sex-select").html(getSexOption());
    $(".total-age-select").html(getTotalAgeOption());
    $(".age-group-selcect").html(getAgeGroupOption());
    $(".parent-child-selcect").html(getpParentChildOption());

    initMatch();
  })


  function selCustom(that){
    if(that.value == "0"){
      $(that).next().show();
    }else{      
      $(that).next().hide();
    }
  }


  function initMatch(){
     matchData = {
      "matchType":"mix",
      "singleList":[
        {
          "pid":0,
          "id":1,
          "name":"单项赛"
        },
        {
          "pid":1,
          "id":3,
          "name":"少年组"
        },       
        {
          "pid":1,
          "id":4,
          "name":"成年组"
        },
        {
          "pid":3,
          "id":5,
          "name":"10-14",
          "ageMin":10,
          "ageMax":19,
          "ageTotal":40,
          "group":1,
          "projects":["MANDOUBLE","MANSINGLE","MIXDOUBLE","WOMENDOUBLE","WOMENSINGLE"]
        }, 
        {
          "pid":3,
          "id":6,
          "name":"15-18",
          "ageMin":15,
          "ageMax":18,
          "ageTotal":50,
          "group":2,
          "projects":["MANDOUBLE","MANSINGLE","MIXDOUBLE","WOMENDOUBLE","WOMENSINGLE"]
        },
        {
          "pid":4,
          "id":7,
          "name":"19-28",
          "ageMin":-1,
          "ageMax":-1,
          "ageTotal":45,
          "group":0,
          "projects":["MANDOUBLE","MANSINGLE","MIXDOUBLE","WOMENDOUBLE","WOMENSINGLE"]
        },
        {
          "pid":4,
          "id":8,
          "name":"29-48",
          "ageMin":-1,
          "ageMax":-1,
          "ageTotal":23,
          "group":0,
          "projects":["MANDOUBLE","MANSINGLE","MIXDOUBLE","WOMENDOUBLE","WOMENSINGLE"]
        }, 
        {
          "pid":4,
          "id":9,
          "name":"49-68",
          "ageMin":-1,
          "ageMax":-1,
          "ageTotal":-1,
          "group":0,
          "projects":["MANDOUBLE","MANSINGLE","MIXDOUBLE","WOMENDOUBLE","WOMENSINGLE"]
        }
      ],
      "groupList":[
        {
          "pid":0,
          "id":2,
          "name":"团体赛",
          "ageMin":-1,
          "ageMax":-1,
          "ageTotal":-1,
          "group":0,
          "projects":["MANDOUBLE","MANSINGLE","MIXDOUBLE","WOMENDOUBLE","WOMENSINGLE"]
        }
      ],
      "singleParentChild":[
        {
            "id":"11",
            "name": "父女组",
            "parentAgeMin": 30,
            "parentAgeMax": 39,
            "childrenAgeMin": 10,
            "childrenAgeMax": 19,
            "sex": "male-female"
        },
        {
            "id":"12",
            "name": "母子组",
            "parentAgeMin": 30,
            "parentAgeMax": 50,
            "childrenAgeMin": 10,
            "childrenAgeMax": 18,
            "sex": "female-male"
        },
        {
            "id":"13",
            "name": "母子组",
            "parentAgeMin": -1,
            "parentAgeMax": -1,
            "childrenAgeMin": -1,
            "childrenAgeMax": -1,
            "sex": "female-male"
        },
        {
            "id":"14",
            "name": "母子组",
            "parentAgeMin": -1,
            "parentAgeMax": -1,
            "childrenAgeMin": -1,
            "childrenAgeMax": -1,
            "sex": "female-male"
        }
      ],
      "groupParentChild":[
        {
            "id":"11",
            "name": "1",
            "parentAgeMin": 30,
            "parentAgeMax": 39,
            "childrenAgeMin": 10,
            "childrenAgeMax": 19,
            "sex": "male-female"
        },
        {
            "id":"12",
            "name": "2",
            "parentAgeMin": 30,
            "parentAgeMax": 50,
            "childrenAgeMin": 10,
            "childrenAgeMax": 18,
            "sex": "female-male"
        },
        {
            "id":"13",
            "name": "3",
            "parentAgeMin": 30,
            "parentAgeMax": 60,
            "childrenAgeMin": 10,
            "childrenAgeMax": 20,
            "sex": "female-male"
        },
        {
            "id":"14",
            "name": "4",
            "parentAgeMin": 30,
            "parentAgeMax": 60,
            "childrenAgeMin": 10,
            "childrenAgeMax": 20,
            "sex": "female-male"
        }
      ]
    };

    function getProjecNameList(arr){
      var str = "";
      for (var i = 0; i < arr.length; i++) { 
        str += projectObj[arr[i]]
        if(i < arr.length-1) str += ';'
      } 
      return str;  
    }

    function getTreeHTML(list,type,pid,n){
      var str = "";
      for (var i = 0; i < list.length; i++) {
        var item = list[i]; 
        if(item.pid == pid){
          var child = getTreeHTML(list,type,item.id,n+1);
          var del = n == 1 ? '' : ' <button class="btn btn-default" style="width:80px;" onclick="removeItem(\''+ item.id +'\')">× 删除</button>';
          if(child != ""){ 
            str += '<div class="my-item cf">'
              +'  <b class="my-item-in fl">'+ item.name +'</b>'
              +'  <div class="fr">'
              +'    <button class="btn btn-default" style="width:80px;" onclick="matchChildClick(\''+ item.id +'\')">+ 新增</button>' + del
              +'  </div>'
              +'</div>'
              +'<div class="my-content" style="padding-left:'+ (n*10) +'px;">'+ child +'</div>' 
          }else{
            var minMax = ""; 
            var ageTotal = "";
            var group = groupObj[item.group];         
            var projectsName = getProjecNameList(item.projects);
            if(item.ageMin == -1 || item.ageMax == -1){
              minMax = "不限"
            }else{
              minMax = item.ageMin + "岁-" + item.ageMax +"岁";
            }

            if(item.ageTotal == -1){
              ageTotal = "不限"
            }else{
              ageTotal = item.ageTotal + "岁";
            }

            str += '<div class="my-item cf">'
              +'  <b class="my-item-in fl">'+ item.name +'</b>'
              +'  <div class="fl handle" style="font-size: 14px; line-height:28px; margin-left: 10px;">'
              +'    <span><i style="font-style: normal; color: #999;">年龄：</i>'+ minMax +'</span>'
              +'    <span class="ml20"><i style="font-style: normal; color: #999;">年龄总和：</i>'+ ageTotal +'</span>'
              +'    <span class="ml20"><i style="font-style: normal; color: #999;">跨年龄组：</i>'+ group +'</span>'
              +'    <span class="ml20"><i style="font-style: normal; color: #999;">项目：</i>'+ projectsName +'</span>'
              +'  </div> '
              +'  <div class="fr">'
              +'    <button class="btn btn-default" style="width:80px;" onclick="matchChildClick(\''+ item.id +'\')">+ 新增</button>'
              +'    <button class="btn btn-default" style="width:80px;" onclick="matchItemClick(\''+ item.id +'\',\''+ type +'\')">设置属性</button>' + del
              +'  </div>'
              +'</div>'
          }
        }
      }
      return str;
    } 

    function getParentChildHTML(list,type){ 
      var str = ''; 
      for (var i = 0; i < list.length; i++) {
        var item = list[i];

        var parentAge = ""; 
        var childrenAge = "";
        if(item.parentAgeMin == -1 || item.parentAgeMax == -1){
          parentAge = "不限"
        }else{
          parentAge = item.parentAgeMin + "岁-" + item.parentAgeMax +"岁";
        }

        if(item.childrenAgeMin == -1 || item.childrenAgeMax == -1){
          childrenAge = "不限"
        }else{
          childrenAge = item.childrenAgeMin + "岁-" + item.childrenAgeMax +"岁";
        }

        str += '<div class="my-item cf">'
              +'  <div class="my-item-in fl ml20">'+ item.name +'</div>'
              +'  <div class="fl handle" style="font-size: 14px; line-height:28px; margin-left: 10px;">'
              +'    <span class="ml20"><i style="font-style: normal; color: #999;">项目：</i>'+ parentChildObj[item.sex]  +'</span>' 
              +'    <span class="ml20"><i style="font-style: normal; color: #999;">家长年龄：</i>'+ parentAge +'</span>'
              +'    <span class="ml20"><i style="font-style: normal; color: #999;">孩子年龄：</i>'+ childrenAge +'</span>'
              +'  </div> '
              +'  <div class="fr">'
              +'    <button class="btn btn-default" style="width:80px;" onclick="modifyParentChild(\''+ item.id +'\',\''+ type +'\')">设置属性</button>'
              +'    <button class="btn btn-default" style="width:80px;" onclick="removeParentChild(\''+ item.id +'\')">× 删除</button>' 
              +'  </div>'
              +'</div>'
      } 
      return str;
    }
    
    var singleMatchStr = getTreeHTML(matchData.singleList,'single',0,1);
    var groupMatchStr = getTreeHTML(matchData.groupList,'group',0,1);
    var singleParentChild = getParentChildHTML(matchData.singleParentChild,'single');
    var groupParentChild = getParentChildHTML(matchData.groupParentChild,'group'); 

    if(matchData.matchType == "single"){
      $("input:radio[name='matchType'][value='singleMatch']").attr("checked",true); 
      $("#matchTypeTxt").text("单项赛"); 
      $("#singleMatch").show();
      $("#groupMatch").hide();

      $("#singleMatchIn").html(singleMatchStr);
      $("#singleParentChild").html(singleParentChild);

    }else if(matchData.matchType == "group"){
      $("input:radio[name='matchType'][value='groupMatch']").attr("checked",true); 
      $("#matchTypeTxt").text("团体赛");   
      $("#groupMatch").show();
      $("#singleMatch").hide();

      $("#groupMatchIn").html(groupMatchStr);

      $("#groupParentChild").html(groupParentChild);

    }else if(matchData.matchType == "mix"){
      $("input:radio[name='matchType'][value='mixMatch']").attr("checked",true); 
      $("#matchTypeTxt").text("混合赛");   
      $("#singleMatch,#groupMatch").show();

      $("#singleMatchIn").html(singleMatchStr);
      $("#groupMatchIn").html(groupMatchStr); 

      $("#singleParentChild").html(singleParentChild);
      $("#groupParentChild").html(groupParentChild);
    }
  }

  //修改比赛类型
  function setMatchType(){ 
    var type = $("input[name='matchType']:checked").val();
    var text = $("input[name='matchType']:checked").attr("text");
    if(type == "singleMatch"){      
      $("#singleMatch").show();
      $("#groupMatch").hide();
    }else if(type == "groupMatch"){
      $("#groupMatch").show();
      $("#singleMatch").hide();
    }else if(type == "mixMatch"){
      $("#singleMatch,#groupMatch").show();
    }
    $("#matchTypeTxt").text(text);
    $("#matchTypePopup").modal('hide');
  }

  //添加分组对话框
  function matchChildClick(id){
    $('#matchChildPopup').modal('show');
    currItemID = id;
  }

  // 确认添加
  function doAddItem(that,n){
    var name = $.trim($("#newName").val());
    if(name == ""){       
        popover($("#newName"),'请输入名称');
        return;
    }
    alert(currItemID);
  }

  // 设置分组属性对话框
  function matchItemClick(id,type){
    $('#matchItemPopup').modal('show');
    var obj;
    if(type == "single"){
      for (var i = 0; i < matchData.singleList.length; i++) {
        var item = matchData.singleList[i];
        if(item['id'] == id){
           obj = item;
           break;
        }
      }
    }else{
      for (var i = 0; i < matchData.groupList.length; i++) {
        var item = matchData.groupList[i];
        if(item['id'] == id){
           obj = item;
           break;
        }
      }
    } 
    $("#modifyName").val(obj.name); 
    $("#ageGroupSel").val(obj.group);

    if(obj.ageMax > 0 && obj.ageMin > 0){
      var arr = ["10-19","20-29","30-39","40-49","50-59","60-69","70-79"];
      var isIn = false;
      for (var i = 0; i < arr.length; i++) {
        if(arr[i] == obj.ageMin +'-'+ obj.ageMax){
          isIn = arr[i];
        }
      }
      if(isIn){   
        $("#ageSel").val(isIn); 
        $("#ageSel").next().hide();
        $("#ageMinInp").val("");
        $("#ageMaxInp").val("");
      }else{         //自定义
        $("#ageSel").val("0");
        $("#ageSel").next().show();
        $("#ageMinInp").val(obj.ageMin);
        $("#ageMaxInp").val(obj.ageMax);
      }
    }else{          //请选择
      $("#ageSel").val(""); 
      $("#ageSel").next().hide();
      $("#ageMinInp").val("");
      $("#ageMaxInp").val("");
    }

    if(obj.ageTotal > 0){
      var arr = ["40","50","60","70","80","90","100"];
      var isIn = false;
      for (var i = 0; i < arr.length; i++) {
        if(arr[i] == obj.ageTotal){
          isIn = arr[i];
        }
      }
      if(isIn){
        $("#ageTotleSel").val(isIn);
        $("#ageTotleSel").next().hide();
        $("#ageTotleInp").val("");
      }else{
        $("#ageTotleSel").val(0);
        $("#ageTotleSel").next().show();
        $("#ageTotleInp").val(obj.ageTotal);
      }
    }else{
      $("#ageTotleSel").val("");
      $("#ageTotleSel").next().hide();
      $("#ageTotleInp").val("");
    }

    if(obj.projects && obj.projects.length > 0){
      var nodes = $("#projectContent input");
      for(var i=0; i < nodes.length; i++){
        var val = $(nodes[i]).val();
        for(var j=0; j < obj.projects.length; j++){
          if(val == obj.projects[j]){
            $(nodes[i]).attr("checked",true);
          }          
        }
      }
    } 
    currItemID = id; 
  }

  //确认修改分组属性
  function doItemDetial(){
    var name = $.trim($("#modifyName").val());
    var ageSel = $("#ageSel").val();
    var ageTotleSel = $("#ageTotleSel").val(); 
    var ageMin,
        ageMax,
        ageTotal = $("#ageGroupSel").val(),
        projectList = [];
    $("input[name='projectList']:checked").each(function(i){
      projectList.push(this.value);
    })

    if(name == ""){
      popover($("#modifyName"),"请输入分组名称!");
      return;
    }

    if(ageSel == "0"){
      ageMin = $.trim($("#ageMinInp").val());
      ageMax = $.trim($("#ageMaxInp").val());
    }else{
      ageMin = ageSel.split('-')[0];
      ageMax = ageSel.split('-')[1];
    }

    if(ageTotleSel == '0'){
      ageTotle = $.trim($("#ageTotleInp").val());
    }else{
      ageTotle = ageTotleSel;
    } 

    if(projectList.length == 0){
      popover($("#projectContent"),"请选择项目!");
      return;
    }
    alert(currItemID);
  }

  //删除分组对话框
  function removeItem(id){
    $('#closeDailog').modal('show'); 
    currItemID = id;
  }

  // 确认删除分组
  function delMatchItem(){
    alert(currItemID);
  }

  //添加亲子组
  function addParentchild(type){
    $('#parentChild').modal('show'); 
    $('#parentChildTitle').text("添加亲子组"); 

    $("#parentChildName").val("");
    $("#parentChildProjectSel").val("unlimit");
    $("#ageParentSel").val("");
    $("#ageChildSel").val("");
    $("#ageParentSel").next().hide();
    $("#ageChildSel").next().hide();
    currItemID = 0;
  }

  //修改亲子组
  function modifyParentChild(id,type){
    $('#parentChild').modal('show');  
    $('#parentChildTitle').text("设置亲子组"); 

    if(type == "single"){
      for (var i = 0; i < matchData.singleParentChild.length; i++) {
        var item = matchData.singleParentChild[i];
        if(item['id'] == id){
           obj = item;
           break;
        }
      }
    }else{
      for (var i = 0; i < matchData.groupParentChild.length; i++) {
        var item = matchData.groupParentChild[i];
        if(item['id'] == id){
           obj = item;
           break;
        }
      }
    } 

    $("#parentChildName").val(obj.name);
    $("#parentChildProjectSel").val(obj.sex);

    if(obj.parentAgeMin > 0 && obj.parentAgeMax > 0){
      var arr = ["10-19","20-29","30-39","40-49","50-59","60-69","70-79"];
      var isIn = false;
      for (var i = 0; i < arr.length; i++) {
        if(arr[i] == obj.parentAgeMin +'-'+ obj.parentAgeMax){
          isIn = arr[i];
        }
      }
      if(isIn){   
        $("#ageParentSel").val(isIn); 
        $("#ageParentSel").next().hide();
        $("#ageMinParentInp").val("");
        $("#ageMaxParentInp").val("");
      }else{         //自定义
        $("#ageParentSel").val("0");
        $("#ageParentSel").next().show();
        $("#ageMinParentInp").val(obj.parentAgeMin);
        $("#ageMaxParentInp").val(obj.parentAgeMax);
      }
    }else{          //请选择
      $("#ageParentSel").val(""); 
      $("#ageParentSel").next().hide();
      $("#ageMinParentInp").val("");
      $("#ageMaxParentInp").val("");
    }


    if(obj.childrenAgeMin > 0 && obj.childrenAgeMax > 0){
      var arr = ["10-19","20-29","30-39","40-49","50-59","60-69","70-79"];
      var isIn = false;
      for (var i = 0; i < arr.length; i++) {
        if(arr[i] == obj.childrenAgeMin +'-'+ obj.childrenAgeMax){
          isIn = arr[i];
        }
      }
      if(isIn){   
        $("#ageChildSel").val(isIn); 
        $("#ageChildSel").next().hide();
        $("#ageMinChildInp").val("");
        $("#ageMaxChildInp").val("");
      }else{         //自定义
        $("#ageChildSel").val("0");
        $("#ageChildSel").next().show();
        $("#ageMinChildInp").val(obj.childrenAgeMin);
        $("#ageMaxChildInp").val(obj.childrenAgeMax);
      }
    }else{          //请选择
      $("#ageChildSel").val(""); 
      $("#ageChildSel").next().hide();
      $("#ageMinChildInp").val("");
      $("#ageMaxChildInp").val("");
    }


    currItemID = id;
  }

  function doParentchild(){
    var name = $.trim($("#parentChildName").val());
    var projectSel = $("#parentChildProjectSel").val();
    var ageParentSel = $("#ageParentSel").val(); 
    var ageChildSel = $("#ageChildSel").val(); 
    var ageMinParentInp,
        ageMaxParentInp,
        ageMinChildInp,
        ageMaxChildInp; 
    if(name == ""){
      popover($("#parentChildName"),"请输入亲子组名称!");
      return;
    }

    if(ageParentSel == "0"){
      ageMinParentInp = $.trim($("#ageMinParentInp").val());
      ageMaxParentInp = $.trim($("#ageMaxParentInp").val());
    }else{
      ageMinParentInp = ageParentSel.split('-')[0];
      ageMaxParentInp = ageParentSel.split('-')[1];
    }
 
    if(ageChildSel == "0"){
      ageMinChildInp = $.trim($("#ageMinChildInp").val());
      ageMaxChildInp = $.trim($("#ageMaxChildInp").val());
    }else{
      ageMinChildInp = ageChildSel.split('-')[0];
      ageMaxChildInp = ageChildSel.split('-')[1];
    }
    alert(currItemID);
  }
  
  //删除亲子组 
  function removeParentChild(id){
    $('#closeParentChlid').modal('show'); 
    currItemID = id;
  }

  // 确认删除亲子组 
  function delParentChild(){
    alert(currItemID);
  }

  function getSexOption(){
    var str = "<option value=''>请选择</option>";
    var arr = [
      {"text":"男","val":"male"},
      {"text":"女","val":"female"}, 
      {"text":"不限","val":"unlimit"}
    ];
    for (var i = 0; i < arr.length; i++) {
      str += '<option value="'+ arr[i]["val"] +'">' + arr[i]["text"] + '</option>'
    }
    return str;
  }

  function getAgeOption(){
    var str = "<option value=''>请选择</option>";
    var arr = [
      {"text":"10-19岁","val":"10-19"},
      {"text":"20-29岁","val":"20-29"},
      {"text":"30-39岁","val":"30-39"},
      {"text":"40-49岁","val":"40-49"},
      {"text":"50-59岁","val":"50-59"},
      {"text":"60-69岁","val":"60-69"},
      {"text":"70-79岁","val":"70-79"}
    ];
    for (var i = 0; i < arr.length; i++) {
      str += '<option value="'+ arr[i]["val"] +'">' + arr[i]["text"] + '</option>'
    }
    str += '<option value="0">自定义</option>'
    return str;
  }

  function getTotalAgeOption(){    
    var str = "<option value=''>请选择</option>";
    var arr = [
      {"text":"40岁","val":"40"},
      {"text":"50岁","val":"50"},
      {"text":"60岁","val":"60"},
      {"text":"70岁","val":"70"},
      {"text":"80岁","val":"80"},
      {"text":"90岁","val":"90"},
      {"text":"100岁","val":"100"}
    ];
    for (var i = 0; i < arr.length; i++) {
      str += '<option value="'+ arr[i]["val"] +'">' + arr[i]["text"] + '</option>'
    }
    str += '<option value="0">自定义</option>'
    return str;
  }

  function getAgeGroupOption(){
    var str = "<option value='0'>不允许</option>";
    var arr = [
      {"text":"升组","val":"1"},
      {"text":"降组","val":"2"},
      {"text":"不限","val":"3"}
    ];
    for (var i = 0; i < arr.length; i++) {
      str += '<option value="'+ arr[i]["val"] +'">' + arr[i]["text"] + '</option>'
    }
    return str;
  }

  function getpParentChildOption(){
    var str = "";
    var arr = [
      {"text":"不限","val":"unlimit"},
      {"text":"父子双打","val":"male-male"},
      {"text":"母子双打","val":"female-male"},
      {"text":"父女双打","val":"male-female"},
      {"text":"母女双打","val":"female-female"}
    ];
    for (var i = 0; i < arr.length; i++) {
      str += '<option value="'+ arr[i]["val"] +'">' + arr[i]["text"] + '</option>'
    }
    return str;
  }
 
  function initProject(){
    var str = "";
    for (key in projectObj) {
      str += '<label style="font-weight:normal; margin-right:20px; line-height:30px;"><input style="vertical-align:middle;" type="checkbox" value="'+ key +'" name="projectList"> '+ projectObj[key] +'</label>'
    }         
    $("#projectContent").html(str);
  }
  initProject(); 

  function popover(node,text){
    node.webuiPopover({ content:text,width:150 }).webuiPopover("show"); 
    setTimeout(function(){
       node.webuiPopover("destroy"); 
    },1500);
  }
 

  //兼项控制
  function setConcurrent(){
    // var arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
    var arr = [{id:"A",text:"项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目A"},{id:"B",text:"项目B"},{id:"C",text:"项目C"},{id:"D",text:"项目D"},{id:"E",text:"项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E"},{id:"F",text:"项目F项目F项目F项目F项目F"},{id:"G",text:"项目G"},{id:"H",text:"项目H"},{id:"I",text:"项目I"},{id:"J",text:"项目J"},{id:"K",text:"项目K"},{id:"L",text:"项目L"},{id:"M",text:"项目M"},{id:"N",text:"项目N"},{id:"O",text:"项目O"},{id:"P",text:"项目P"},{id:"Q",text:"项目Q"},{id:"R",text:"项目R"},{id:"S",text:"项目S"},{id:"T",text:"项目T"},{id:"U",text:"项目U"},{id:"V",text:"项目V"},{id:"W",text:"项目W"},{id:"X",text:"项目X"},{id:"Y",text:"项目Y"},{id:"Z",text:"项目Z"}];
    var body = '';
    var head = ''; // '<th class="t-title nosee"></th>'
    var left = '';
    for (var i = 0; i < arr.length; i++) {
      head += '<th class="t-title">'+ arr[i]["text"] +'</th>';
      left += '<tr><td class="t-title"><div>'+ arr[i]["text"] +'</div></td></tr>';
    }
    head = '<tr>' + head + '</tr>';
    for (var i = 0; i < arr.length; i++) {
      var str = ''; 
      for (var j = 0; j < arr.length; j++) {
        var input = '';
        if(i <= j){
          str += '<td class="t-td nosee"></td>'; 
        }else{
          str += '<td class="t-td"><label><i><input type="checkbox" value="'+ arr[i]["id"] +  '-' + arr[j]["id"] + '" /><i></label></td>';
        }
      }
      body += '<tr>' + str + '</tr>';  // <td class="t-title"><div>'+ arr[i]["text"] +'</div></td>
    }

    $("#tabTop").html('<table class="my-table"><thead>'+ head + '</thead></table>'); 
    $("#tabLeft").html('<table class="my-table"><tbody>' + left + '</tbody></table>');
    $("#tabData").html('<table class="my-table"><tbody>' + body + '</tbody></table>');  

    $("#tabData td").hover(function(){ 
      var n = $(this).index();
      var m = $(this).parent("tr").index();
      var list = $(this).parent("tr").siblings('tr');
      $("#tabTop th").eq(n).css({ background:"#ceebfd" });
      $("#tabLeft td").eq(m).css({ background:"#ceebfd" });
      list.each(function(){
        $(this).find("td").eq(n).css({ background:"#f1f9fe" });
      });
    },function(){
      var n = $(this).index();
      var m = $(this).parent("tr").index();
      var list = $(this).parent("tr").siblings('tr');
      $("#tabTop th").eq(n).css({ background:"" });
      $("#tabLeft td").eq(m).css({ background:"" });
      list.each(function(){
        $(this).find("td").eq(n).css({ background:"" });
      });      
    })

    setTableLayout();
    $(window).resize(function(){
      setTableLayout();
    })
  }

  function setTableLayout(){
    $("#tabData table").eq(0).css({ width : $("#tabTop table").eq(0).outerWidth() });
    $("#tabTop th").each(function(i){
      $("#tabData tr").eq(0).find("td").eq(i).css({ width:$(this).outerWidth() });
    });

    $("#tabData table").eq(0).css({ height: $("#tabLeft table").eq(0).outerHeight() }); 
    $("#tabLeft tr").each(function(i){
      $("#tabData tr").eq(i).find("td").css({ height: $(this).outerHeight() });
    })

    $("#tabLeft table").eq(0).css({ height: $("#tabData table").eq(0).outerHeight() });
    $("#tabData tr").each(function(i){
      $("#tabLeft tr").eq(i).find("td").css({ height: $(this).outerHeight() });
    })

    $("#tabDataCon").css({height : $("#tabDataCon").parent().outerHeight() - $("#tabTopCon").outerHeight() })
    $("#tabTopCon,#tabDataCon").css({ marginLeft: $("#tabLeftCon").outerWidth() - 2 , width: $("#tabTopCon").parent().width() - $("#tabLeftCon").outerWidth() + 2 });

    $("#tabLeftCon").css({ height: $("#tabDataCon").height() , top:$("#tabTop").outerHeight() - 2 });
    $("#tabLeftTop").css({ height: $("#tabTop").outerHeight() , width :$("#tabLeftCon").outerWidth() });

    $("#tabDataCon").scroll(function(){
      $("#tabTopCon").scrollLeft($("#tabDataCon").scrollLeft());
      $("#tabLeftCon").scrollTop($("#tabDataCon").scrollTop()); 
    })
  }
 

  function submit3(){
    var arr =  []
    var list = $("#tabData").find("input:checked").each(function(){
      arr.push($(this).val());
    })

    console.log(arr);
    
  }
</script>

</div> 
</body>
</html>